<template>
  <!-- :data="tableData" 表格的数据源--数据来源 -->
  <el-table :data="tableData" style="width: 100%; height: 600px">
    <!-- el-table-column 列表模板  每一列的内容-->

    <!-- 第一列的模板， 默认每一列的内容都是文本 -->
    <!-- prop="date" 表示数组中元素的date属性 就是这列内容 -->
    <!-- label="日期"  表头 -->
    <!-- <el-table-column prop="date" label="日期" width="180" /> -->
    <el-table-column prop="proid" label="id" width="280" />

    <el-table-column label="商品名称" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span>{{ scope.row.proname }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column prop="category" label="商品分类" width="100" />

    <el-table-column label="商品名称" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span>{{ scope.row.proname }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="售卖状态" width="180">
      <template #default="scope">
        <!-- https://cn.element-plus.org/zh-CN/component/switch.html#%E6%89%A9%E5%B1%95%E7%9A%84-value-%E7%B1%BB%E5%9E%8B -->
        <!--active-value 选中以后的值是 数字 1   -->
        <!--inactive-value 非选中以后的值是 数字 0  -->
        <el-switch
          v-model="scope.row.issale"
          :active-value="1"
          :inactive-value="0"
          @change="changeIsSale(scope.row)"
        />
      </template>
    </el-table-column>

    <el-table-column label="商品图片" width="280">
      <template #default="scope">
        <img
          v-for="(item, index) in scope.row.imgs"
          :key="index"
          :src="item"
          alt=""
          class="img"
        />
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template #default="scope">
        <!-- 点击传出了 下标和这一行的对象 -->
        <el-button
          size="small"
          @click="handleEdit(scope.$index, scope.row)"
          v-if="store.permissionBtnList.includes('productUpdate')"
        >
          编辑
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          v-if="store.permissionBtnList.includes('productDel')"
        >
          删除
        </el-button>

        <!-- 指令控制按钮权限 -->
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          v-auth="'productDel'"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="pagesize"
    v-model:current-page="count"
    @change="pageChange"
  />

  <!-- https://cn.element-plus.org/zh-CN/component/dialog.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%86%85%E5%AE%B9 -->
  <!-- 编辑弹框 -->
  <el-dialog v-model="dialogFormVisible" title="商品编辑" width="600">
    <el-form :model="editObj">
      <el-form-item label="商品名称" :label-width="formLabelWidth">
        <el-input v-model="editObj.proname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="category" :label-width="formLabelWidth">
        <el-input v-model="editObj.category" autocomplete="off" />
      </el-form-item>
      <el-form-item label="desc" :label-width="formLabelWidth">
        <el-input v-model="editObj.desc" autocomplete="off" />
      </el-form-item>
      <el-form-item label="imgs" :label-width="formLabelWidth">
        <!-- 上传图片组件 -->
        <!-- https://cn.element-plus.org/zh-CN/component/upload.html#%E7%85%A7%E7%89%87%E5%A2%99 -->
        <!-- v-model:file-list  图片墙组件的 图片的数据源数组 -->
        <!-- action  是一个地址，上面图片接口-->
        <el-upload
          v-model:file-list="fileList"
          action="http://localhost:3001/admin/file/upload"
          name="img"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <!-- 预览弹框 -->
        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="editSaveFn"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {
  getProductListReq,
  productDeleteReq,
  productUpdateIsSaleReq,
  productUpdateReq,
} from '@/api/product'
import { ref, reactive } from 'vue'
import _ from 'lodash'
import { useUserInfoStore } from '@/stores/user'
// 编辑--上传图片--
import type { UploadProps, UploadUserFile } from 'element-plus'

const store = useUserInfoStore()

// 编辑弹框的逻辑

// 表格列表-删除-修改状态

interface IProductItem {
  proname: string
  category: string
  desc: string
  issale: number
  imgs: Array<string>
  proid: string
}
const tableData = ref<Array<IProductItem>>([])
const count = ref(1)
const pagesize = ref(12)
// 总数
const total = ref(0)
function loadList() {
  // 发起请求
  getProductListReq(count.value, pagesize.value).then(r => {
    console.log(r.data)
    // 服务器返回数据给ref
    tableData.value = r.data.data
    total.value = r.data.total
  })
}
loadList()

// 分页改变
function pageChange() {
  console.log(count.value)
  loadList()
}

async function handleDelete(index: number, row: IProductItem) {
  console.log(index)
  console.log(row)
  await productDeleteReq(row.proid)
  loadList()
}

async function changeIsSale(row: IProductItem) {
  console.log(row, '-------')
  await productUpdateIsSaleReq(row.proid, 'issale', row.issale ? true : false)
  loadList()
}

// 弹框编辑的逻辑

// 控制弹框的显示和隐藏
const dialogFormVisible = ref(false)
const formLabelWidth = '100px'
const editObj = ref<IProductItem>({
  proname: '',
  proid: '',
  category: '',
  desc: '',
  issale: 1,
  imgs: [''],
})

//编辑按钮事件
function handleEdit(index: number, row: IProductItem) {
  console.log(index)
  // row 要编辑的数据 对象 （数组中的某个元素）
  console.log(row)
  //让弹框出现
  dialogFormVisible.value = true
  //保存要编辑的数据  (深拷贝)
  // editObj.value = JSON.parse(JSON.stringify(row))
  editObj.value = _.cloneDeep(row)
  editObj.value.imgs
  //将字符串数组 映射成一个对象数组，放到editObj
  // ['zxx.jpn'] -> [{url:'xxx.jpn',name:'xxx.jpg'}]
  fileList.value = editObj.value.imgs.map(v => {
    return { name: v, url: v }
  })
}
// 编辑--保存功能
async function editSaveFn() {
  //调用保存接口--隐藏弹框
  //修改以后的数据 对象
  // debugger
  // ----把filelist 数据--》转为  imgs中数据

  // ps: 使用upload上传文件，组件会在filelist添加一个对象，这个对象中url属性不是服务器返回的图片的网址，是临时二进制图片地址，添加的这个对象中，有个一response属性，里面的fileUrl 属性才是服务器返回的真实的图片地址
  editObj.value.imgs = fileList.value.map(v => {
    //如果v。response属性存在，说明这个图片是刚刚上传的
    if (v.response) {
      // 返回上传成功以后的图片地址
      return v.response.fileUrl
    } else {
      // 图片是已经存在图片
      return v.url
    }
  })

  console.log(editObj.value)
  await productUpdateReq(editObj.value.proid, editObj.value)

  //隐藏弹框
  dialogFormVisible.value = false
  //刷新列表
  loadList()
}

// import { useUserInfoStore } from '@/stores/user'
// 图片墙列表数据
const fileList = ref<UploadUserFile[]>([
  // **图片墙的数组-中元素格式是规定的
  // name 属性 图片命名 随便
  // url  图片的地址
  // {
  //   name: 'food.jpeg',
  //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  // },
])

// 控制预览弹框的图片地址
const dialogImageUrl = ref('')
// 预览弹框的显示和隐藏
const dialogVisible = ref(false)

// 图片墙里面的删除按钮
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}
// 图片里面的预览按钮的点击事件
const handlePictureCardPreview: UploadProps['onPreview'] = uploadFile => {
  // 把点击的图片的地址，存入，弹框中img的地址
  dialogImageUrl.value = uploadFile.url!
  // 弹框出现
  dialogVisible.value = true
}
</script>
<style scoped>
.img {
  width: 50px;
}
</style>
